<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>创建一个新的li</button>
    <ul>
        <p>爱的束缚</p>
        <p>的说法</p>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>

      <script>
        //点击li 显示 标签中间的内容  

        // 点击button 按钮  创建一个新的li 放到 ul中 
        //获取元素 
        //绑定事件 
        // innerText 
        // 创建节点 
        // 插入节点
        // var uls = document.querySelector('ul');
        // var lis = uls.querySelectorAll('li');
        // lis.forEach(function(item,index){
        //     // querySelectorAll得到伪数组 可以使用数组高级方法
        //     // getElementsByName getElementsByTagName getElementsByClassName  
        //     // 得到的伪数组不能还用数组高级方法 必须把伪数组转成数组
        //     item.addEventListener('click',function(){
        //         alert(item.innerText);// 点击哪个li this就是哪个li 
        //         // alert(this.innerText);// 点击哪个li this就是哪个li 

        //     });

        // })

        // var btn = document.querySelector('button');

        // btn.onclick = function(){
        //     for(var i=0;i<3;i++){
        //         var  newli = document.createElement('li');
        //         newli.innerText = `我是新来的${i}`;
        //         uls.appendChild(newli);
        //     }
        // }

        // 缺点:
        // 上面那种方式 需要获取每个li 操作的dom元素太多了  
        // 新的li 获取不到标签中间的内容 


        //解决方案  
        // 减少dom元素的获取  

        // 优化 

    //   var uls = document.querySelector('ul');
    //   var btn = document.querySelector('button');

    //   uls.addEventListener('click',function(e){
    //         // console.log(e.target);// 通过这种方式拿到了 li 
    //         console.log(e.target.innerText);
    //   });

    //   btn.onclick = function(){
    //         for(var i=0;i<3;i++){
    //             var  newli = document.createElement('li');
    //             newli.innerText = `我是新来的${i}`;
    //             uls.appendChild(newli);
    //         }
    //     }

        // 事件 委托 减少dom元素的获取
        // 可以动态获取新添加的元素的内容 



        // 新的需求  
        // ul中既有 p  又有 li 
        // 我们现在只要li 
          var uls = document.querySelector('ul');
            var btn = document.querySelector('button');

      uls.addEventListener('click',function(e){
            // nodeType
            //   元素 1
            //   属性 2
            //   文本 3
            //   注释8 
            // nodeName
            //   元素  大写标签名字
            //   属性  属性名 
            //   文本  #text
            //  数值   #comment
            // nodeValue
            // 元素  null
            // 属性  属性的值 
            // 文本  数据本身 
            // 注释  注释的内容 
            // console.log(e.target.innerText);
            if(e.target.nodeName == 'LI'){
                console.log(e.target.innerText);
            }
      });

      btn.onclick = function(){
            for(var i=0;i<3;i++){
                var  newli = document.createElement('li');
                newli.innerText = `我是新来的${i}`;
                uls.appendChild(newli);
            }
        }

      </script>
</body>
</html>